<template>
  <div class="home">
    <div class="app-container screen">
      <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>快捷方式</span>
          </div>
          <div class="quick">
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/changjingguanli.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:10;">常用通道</p>
            </div>
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/fire.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:10;">热门通道</p>
            </div>
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/qq.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:10;">qq通道</p>
            </div>
            <div class="quick-item" style="margin-right:0;">
              <div class="quick-icon">
                <img src="../assets/images/weixin-copy.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:10;">微信通道</p>
            </div>
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/dingdanguanli.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:0;">订单管理</p>
            </div>
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/fenzu.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:0;">分类管理</p>
            </div>
            <div class="quick-item">
              <div class="quick-icon">
                <img src="../assets/images/shanchu.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:0;">流水清除</p>
            </div>
            <div class="quick-item" style="margin-right:0;">
              <div class="quick-icon">
                <img src="../assets/images/bianji.svg" alt="" style="width:30px;height:30px;">
              </div>
              <p style="margin-top:10px;margin-bottom:0;">资料修改</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>流水汇总</span>
          </div>
          <div class="flowing">
            <div class="flowing-item">
              <div style="font-size: 18px;color:#999;">昨日流水</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayIncome}}</div>
            </div>
            <div class="flowing-item" style="margin-left:5%;margin-bottom:18px;">
              <div style="font-size: 18px;color:#999;">今日流水</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayIncome}}</div>
            </div>
            <div class="flowing-item">
              <div style="font-size: 18px;color:#999;">总流水</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.totalIncome}}</div>
            </div>
            <div class="flowing-item" style="margin-left:5%;">
              <div style="font-size: 18px;color:#999;">预存金额</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.balance}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单汇总</span>
          </div>
          <div class="flowing">
            <div class="flowing-item">
              <div style="font-size: 18px;color:#999;">昨日订单</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayTradeNum}}</div>
            </div>
            <div class="flowing-item" style="margin-left:5%;margin-bottom:18px;">
              <div style="font-size: 18px;color:#999;">昨日扣费</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayDeduction}}</div>
            </div>
            <div class="flowing-item">
              <div style="font-size: 18px;color:#999;">今日订单</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayTradeNum}}</div>
            </div>
            <div class="flowing-item" style="margin-left:5%;">
              <div style="font-size: 18px;color:#999;">今日扣费</div>
              <div style="font-size:28px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayDeduction}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      </el-row>
  
      <el-row style="margin-top:20px;" :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据概述</span>
          </div>
          <div class="chart">
             <div class="chart-spot" :style="spotState ? 'background: #3A7BD5;' : 'background: #EBEEF5;'" @click="handelSpot"></div>
             <div class="chart-right" :style="!spotState ? 'background: #3A7BD5;' : 'background: #EBEEF5;'" @click="handelSpot"></div>
             <div id="myChart" :style="{width: '100%', height: '240px'}"></div>
          </div>
          
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="height:320px">
          <div slot="header" class="clearfix">
            <span class="effect" :style="effectState ? 'color:#3A7BD5;font-weight: 700;cursor:pointer' : 'cursor:pointer'" @click="handelffect">今日效果报告</span>
            <span :style="effectState ? 'cursor:pointer' : 'color:#3A7BD5;font-weight: 700;cursor:pointer'" @click="handelffect">昨日效果报告</span>
          </div>
          <div v-show="effectState">
            今日成功率：
            <el-progress :percentage="statisticalData.todaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress>
          </div>
          <div v-show="!effectState">
            昨日成功率：
            <el-progress :percentage="statisticalData.yesterdaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress>
          </div>
          <div id="main" :style="{width: '100%', height: '200px'}"></div>
        </el-card>
      </el-col>
      </el-row>
      <el-row style="margin-top:20px;" :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公告列表</span>
          </div>
<!--           <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div> -->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>商户信息概括</span>
          </div>
<!--           <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div> -->
        </el-card>
      </el-col>
      </el-row>
    </div>
    <div class="minScreen">
            <el-col :span="24" style="margin-bottom:10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>快捷方式</span>
                </div>
                <div class="quick">
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/changjingguanli.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:10;">常用通道</p>
                  </div>
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/fire.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:10;">热门通道</p>
                  </div>
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/qq.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:10;">qq通道</p>
                  </div>
                  <div class="quick-item" style="margin-right:0;">
                    <div class="quick-icon">
                      <img src="../assets/images/weixin-copy.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:10;">微信通道</p>
                  </div>
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/dingdanguanli.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:0;">订单管理</p>
                  </div>
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/fenzu.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:0;">分类管理</p>
                  </div>
                  <div class="quick-item">
                    <div class="quick-icon">
                      <img src="../assets/images/shanchu.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:0;">流水清除</p>
                  </div>
                  <div class="quick-item" style="margin-right:0;">
                    <div class="quick-icon">
                      <img src="../assets/images/bianji.svg" alt="" style="width:30px;height:30px;">
                    </div>
                    <p style="margin-top:10px;margin-bottom:0;">资料修改</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>流水汇总</span>
                </div>
                <div class="flowing">
                  <div class="flowing-item">
                    <div style="font-size: 18px;color:#999;">昨日流水</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayIncome}}</div>
                  </div>
                  <div class="flowing-item" style="margin-left:5%;margin-bottom:18px;">
                    <div style="font-size: 18px;color:#999;">今日流水</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayIncome}}</div>
                  </div>
                  <div class="flowing-item">
                    <div style="font-size: 18px;color:#999;">总流水</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.totalIncome}}</div>
                  </div>
                  <div class="flowing-item" style="margin-left:5%;">
                    <div style="font-size: 18px;color:#999;">预存金额</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.balance}}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>订单汇总</span>
                </div>
                <div class="flowing">
                  <div class="flowing-item">
                    <div style="font-size: 18px;color:#999;">昨日订单</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayTradeNum}}</div>
                  </div>
                  <div class="flowing-item" style="margin-left:5%;margin-bottom:18px;">
                    <div style="font-size: 18px;color:#999;">昨日扣费</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.yesterdayDeduction}}</div>
                  </div>
                  <div class="flowing-item">
                    <div style="font-size: 18px;color:#999;">今日订单</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayTradeNum}}</div>
                  </div>
                  <div class="flowing-item" style="margin-left:5%;">
                    <div style="font-size: 18px;color:#999;">今日扣费</div>
                    <div style="font-size:20px;margin-top:18px;color:#3A7BD5;">{{statisticalData.todayDeduction}}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>数据概述</span>
                </div>
                <div class="chart">
                  <div class="chart-spot" :style="spotState ? 'background: #3A7BD5;' : 'background: #EBEEF5;'" @click="handelSpot"></div>
                  <div class="chart-right" :style="!spotState ? 'background: #3A7BD5;' : 'background: #EBEEF5;'" @click="handelSpot"></div>
                  <div id="myChartMin" :style="{width: '100%', height: '240px'}"></div>
                  <!-- <div id="myChartTow" :style="{width: '100%', height: '240px'}" v-else></div> -->
                </div>
                
              </el-card>
            </el-col>
            <el-col :span="24" style="margin-bottom:10px;">
              <el-card class="box-card" style="height:320px">
                <div slot="header" class="clearfix">
                  <span class="effect" :style="effectState ? 'color:#3A7BD5;font-weight: 700;cursor:pointer' : 'cursor:pointer'" @click="handelffect">今日效果报告</span>
                  <span :style="effectState ? 'cursor:pointer' : 'color:#3A7BD5;font-weight: 700;cursor:pointer'" @click="handelffect">昨日效果报告</span>
                </div>
                <div v-show="effectState">
                  今日成功率：
                  <el-progress :percentage="statisticalData.todaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress>
                  <!-- <div id="mainMin" :style="{width: '100%', height: '200px'}"></div> -->
                  <!-- 今日微信支付成功率：
                  <el-progress :percentage="statisticalData.todayWxPaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress>
                  今日支付宝支付成功率：
                  <el-progress :percentage="statisticalData.todayAliPaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress> -->
                </div>
                <div v-show="!effectState">
                  昨日成功率：
                  <el-progress :percentage="statisticalData.yesterdaySuccessRate" style="margin-bottom:30px; width:90%;" :color="'#3A7BD5'"></el-progress>
                </div>
                <div id="mainMin" :style="{width: '100%', height: '200px'}"></div>
              </el-card>
            </el-col>
    </div>
    <div>
      
    </div>
  </div>
</template>

<script>
  import {
    initIndexData
  } from "@/api/merchant/index";
  export default {
    name: "Index",
    data() {
      return {
        //统计的数据
        statisticalData: {},
        effectState:true,
        spotState:true
      };
    },
    created() {
      this.initData();
    },
    // activated(){
    //    this.initData(); 
    // },
    mounted() {
      
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      //初始化数据
      initData() {
        initIndexData().then(response => {
          response.data.yesterdaySuccessRate = Number(response.data.yesterdaySuccessRate)
          response.data.yesterdayDeduction = Number(response.data.yesterdayDeduction)
          response.data.todaySuccessRate = Number(response.data.todaySuccessRate)
          response.data.wxPaySuccessRate = Number(response.data.wxPaySuccessRate)
          response.data.aliPaySuccessRate = Number(response.data.aliPaySuccessRate)
          this.statisticalData = response.data;
          this.drawLine();
        });
      },
      drawLine() {
        var that = this
        // 基于准备好的dom，初始化echarts实例myChartTow
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let myMain = this.$echarts.init(document.getElementById('main'))
        let myChartMin = this.$echarts.init(document.getElementById('myChartMin'))
        let mainMin = this.$echarts.init(document.getElementById('mainMin'))
        // 绘制图表
        myChart.setOption({
          color: '#3A7BD5',
          title: {
            text: that.spotState ? '24小时流水监控' : '7天流水监控',
            x: 'center',
            textStyle: {
              color: '#3A7BD5',
              fontSize: 16
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: that.spotState ? ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
              '16', '17', '18', '19', '20', '21', '22', '23'
            ] : [1,2,3,4,5,6,7]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: that.spotState ? this.statisticalData.incomeMonitor : [1,2,3,4,5,6,7],
            type: 'line',
            smooth: true,
            areaStyle: {},
          }],
          tooltip : {
            trigger: 'axis',
            // axisPointer: {
            //     type: 'cross',
            //     label: {
            //         backgroundColor: '#6a7985'
            //     }
            // }
          }
        });
        myChartMin.setOption({
          color: '#3A7BD5',
          title: {
            text: that.spotState ? '24小时流水监控' : '7天流水监控',
            x: 'center',
            textStyle: {
              color: '#3A7BD5',
              fontSize: 16
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: that.spotState ? ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
              '16', '17', '18', '19', '20', '21', '22', '23'
            ] : [1,2,3,4,5,6,7]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: that.spotState ? this.statisticalData.incomeMonitor : [1,2,3,4,5,6,7],
            type: 'line',
            smooth: true,
            areaStyle: {}
          }]
        });
        myMain.setOption({
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '支付成功占比',
              type: 'pie',
              radius: '50%',
              data: [
                { value:that.effectState ? this.statisticalData.todayWxPaySuccessRate : this.statisticalData.yesterdayWxPaySuccessRate, name: '微信占比' },
                { value: that.effectState ? this.statisticalData.todayAliPaySuccessRate : this.statisticalData.yesterdayAliPaySuccessRate, name: '支付宝占比' },
              ],
              color:['#04BE02','rgb(58, 123, 213)'],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
        mainMin.setOption({
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: '支付成功占比',
              type: 'pie',
              radius: '50%',
              data: [
                { value: that.effectState ? this.statisticalData.todayWxPaySuccessRate : this.statisticalData.yesterdayWxPaySuccessRate, name: '微信占比' },
                { value: that.effectState ? this.statisticalData.todayAliPaySuccessRate : this.statisticalData.yesterdayAliPaySuccessRate, name: '支付宝占比' },
              ],
              color:['#04BE02','rgb(58, 123, 213)'],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
      handelffect(){
        this.effectState = !this.effectState
        this.drawLine()
      },
      handelSpot(){
        this.spotState = !this.spotState
        this.drawLine()
      }
    },
  };

</script>

<style scoped lang="scss">
@media screen and (max-width:720px){
 .screen {
   display:none;
  }
}
@media screen and (min-width:720px){
 .minScreen {
   display:none;
  }
}
::v-deep .el-progress__text{
  position: absolute;
}
  .home {
    height: calc(100vh - 84px);
    background-color: #EBEEF5;
  }

  .box-card {
    width: 100%;
  }

  .quick {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quick-item {
    text-align: center;
    width: 23%;
    margin-right: 2.5%;
  }

  .quick-icon {
    height: 60px;
    background-color: #F2F6FC;
    font-size: 35px;
    text-align: center;
    line-height: 60px;
  }

  .flowing {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .flowing-item {
    width: 47.5%;
    height: 90px;
    background-color: #F2F6FC;
    padding: 10px;
    box-sizing: border-box;
  }
  .effect{
    margin-right: 20px;
  }
  .chart{
    position: relative;
  }
  .chart-spot{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    top: 10px;
    right: 30px;
    z-index: 99;
  }
  .chart-right{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    top: 10px;
    right: 10px;
    z-index: 99;
  }

  .minScreen{
    padding: 10px;
  }
</style>
